import {ListItem} from "react-native-elements";
import {StyleSheet, Text, View} from "react-native";
import FastImage from "react-native-fast-image";
import React from "react";

const PostListItem = ({item, onPress = () => null}) => {
    return (
        <ListItem
            containerStyle={styles.postTtem}
            onPress={() => {
                onPress && onPress(item);
            }}
        >
            <ListItem.Content>
                <Text style={styles.postTitle} numberOfLines={2}>{item.title}</Text>
                <View style={{flex: 1}}/>
                <View style={{flexDirection: 'row'}}>
                    <View style={{flex: 1}}>
                        <Text style={styles.createdAt}>{item.created_at}</Text>
                    </View>
                    <View>
                        <Text style={styles.views}>{item.views}次阅读</Text>
                    </View>
                </View>
            </ListItem.Content>
            {
                item.image ?
                    <FastImage
                        source={{uri: item.image}}
                        style={styles.thumb}
                        resizeMode={FastImage.resizeMode.cover}
                    />
                    : null
            }
        </ListItem>
    );
}

export default PostListItem;

const styles = StyleSheet.create({
    postTtem: {
        borderBottomWidth: 0.5,
        borderBottomColor: '#f0f0f0'
    },
    postTitle: {
        fontSize: 18,
        fontWeight: '400',
        color: '#333',
        lineHeight: 24
    },
    createdAt: {
        fontSize: 14,
        color: '#838383',
        flex: 1
    },
    views: {
        fontSize: 14,
        color: '#838383'
    },
    thumb: {
        width: 120,
        height: 100,
        borderRadius: 3,
        resizeMode: 'cover'
    }
});
